<template>
	<view>
		<z-paging class="zPagingCircle" ref="paging" @onRefresh="onRefresh" @query="query" v-model="list"
			@scroll="scroll" :empty-view-style="{ 'margin-bottom': '100rpx' }" :auto="false">
			<view class="box">
				<view class="box-text" v-if="text">
					{{text}}
				</view>
				<view class="search">
					<u-search placeholder="关键字进行筛选" :clearabled="true" :showAction="false"
						v-model="params.content"></u-search>
				</view>
				<view class="help" @click="toRule">
					<image :src="ossUrl +  '/static/image/wenhao.png'" mode=""></image>
					如何更有效的激活好友？
				</view>
				<view class="list">
					<view class="list-item" v-for="it in list" @click="toEdit(it)">
						<view class="list-item-img">
							<image :src="it.img" mode="widthFix"></image>
						</view>
						<view class="btns">
							<view class="btn" @click.stop="downLoad(it)">下载图片转发好友</view>
						</view>
					</view>
				</view>
			</view>
		</z-paging>
		<view class="painter">
			<l-painter :board="board" style="width: 100%;height: 100%;" ref="painterRef" />
		</view>
	</view>

</template>

<script>
	import {
		energy_station
	} from '@/common/http/api.js'
	export default {
		data() {
			return {
				list: [],
				//分页
				params: {
					content: ''
				},
				text: '',
				board: {},
			};
		},
		onLoad() {
			this.reload()
		},
		watch: {
			'params.content': {
				handler(val) {
					this.reload()
				}
			}
		},
		methods: {
			toRule(){
				uni.navigateTo({
					url:'/pagesA/aboutUs/aboutUs?id=16'
				})
			},
			toEdit(it) {
				uni.setStorageSync('energyStation', it)
				uni.navigateTo({
					url: '/pagesC/energyStation/edit'
				})
			},
			toOhter(it) {
				uni.navigateTo({
					url: '/pages/index/other?isBackHome=2&isBackHome=2&shareId=' + it.b_id
				})
			},
			/**
			 * 分页
			 * @param {Object} pageNo 页码
			 * @param {Object} pageSize 数量
			 */
			query(pageNo, pageSize) {
				console.log('触底', pageNo, pageSize)
				this.init(pageNo, pageSize)
			},
			// 下拉刷新被触发
			onRefresh() {
				console.log('下拉刷新')
			},
			init(pageNo = 1, pageSize) {
				const params = {
					...this.params,
					page: pageNo
				}
				energy_station(params).then(res => {
					this.text = res.data.text
					this.$refs.paging.complete(res.data.list);
				}).catch(err => {
					this.$refs.paging.complete(false);
				})
			},
			reload() {
				this.$refs.paging.reload();
			},
			downLoad(e) {

				const text = e.text.find(i => i.state === 1).text

				this.board = {
					css: {
						// 根节点若无尺寸，自动获取父级节点
						width: '690rpx',
						height: '844rpx'
					},
					views: [
						//底图
						{
							type: 'image',
							src: e.img,
							css: {
								width: '100%',
								height: '100%'
							}
						},
						//二维码
						{
							type: 'image',
							src: e.user_QR_code,
							css: {
								width: '105rpx',
								height: '105rpx',
								position: "absolute",
								zIndex: "2",
								right: '35rpx',
								bottom: '45rpx'
							}
						},
						//长按查看我的名片
						// {
						// 	type: "text",
						// 	css: {
						// 		width: "175rpx",
						// 		height: "25rpx",
						// 		position: "absolute",
						// 		zIndex: "2",
						// 		right: "0rpx",
						// 		bottom: "10rpx",
						// 		fontSize: "18rpx",
						// 		textAlign: "center"
						// 	},
						// 	text: '长按查看我的名片'
						// },
						//头像
						{
							type: 'image',
							src: e.head,
							css: {
								width: "78rpx",
								height: "78rpx",
								position: "absolute",
								left: "35rpx",
								bottom: "60rpx",
								borderRadius: "50%"
							}
						},
						//姓名
						{
							type: "text",
							css: {
								width: "125rpx",
								height: "25rpx",
								position: "absolute",
								left: "10rpx",
								bottom: "25rpx",
								fontSize: "20rpx",
								textAlign: "center"
							},
							text: e.nickname
						},
						//内容
						{
							css: {
								width: "360rpx",
								height: "135rpx",
								position: "absolute",
								left: "138rpx",
								bottom: "17rpx",
								// background: "rgba(0,0,0,0.5)",
							},
							views: [{
								type: "text",
								css: {
									fontSize: "28rpx",
									// color: "#e4393c",
									lineClamp: 4,
									lineHeight: "35rpx"
								},
								text: text
							}, ],
							type: "view"
						},
					]
				}

				this.$nextTick(() => {
					this.$refs.painterRef.canvasToTempFilePathSync({
						fileType: "jpg",
						// 如果返回的是base64是无法使用 saveImageToPhotosAlbum，需要设置 pathType为url
						pathType: 'url',
						quality: 1,
						success: (res) => {
							console.log(res.tempFilePath);
							// 非H5 保存到相册
							// H5 提示用户长按图另存
							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath, // 下载后的临时路径
								success: () => {
									uni.showToast({duration:3000,
										title: '下载成功',
										icon: 'none'
									});
								},
								fail: (err) => {
									console.log(err);
									uni.showToast({duration:3000,
										title: '下载失败',
										icon: 'none'
									});
								}
							});
						},
						fail: (err) => {
							console.log('err', err)

						}
					});
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.box-text {
		background: #F6F6F6;
		font-size: 28rpx;
		box-sizing: border-box;
		padding: 20rpx;
		border-radius: 20rpx;
		width: 690rpx;
		margin: 30rpx auto;
		white-space: pre-wrap;
	}

	.search {
		width: 690rpx;
		margin: 0 auto 30rpx;
	}

	.list {
		width: 690rpx;
		margin: 0 auto;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-gap: 30rpx;

		.list-item {
			width: 330rpx;
		}

		.list-item-img {
			width: 100%;
			height: 320rpx;
			overflow: hidden;
			margin-bottom: 15rpx;

			image {
				width: 100%;
			}
		}

		.btns {
			display: flex;
			justify-content: center;

			.btn {
				width: fit-content;
				background: #088751;
				color: #fff;
				padding: 20rpx 30rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 28rpx;
				border-radius: 10rpx;
			}
		}
	}

	.help {
		width: 100%;
		height: 71rpx;
		// background: #FFFFFF;
		box-sizing: border-box;
		padding: 22rpx 30rpx;
		font-family: PingFang SC;
		font-weight: 400;
		font-size: 26rpx;
		color: #12B475;
		display: flex;
		align-items: center;
		margin-bottom: 30rpx;

		image {
			width: 32rpx;
			height: 33rpx;
			margin-right: 10rpx;
		}
	}

	.painter {
		width: 1280rpx;
		height: 1810rpx;
		position: fixed;
		left: -200%;
	}
</style>